<template>
  <v-card>
    <v-card-title>
      <!--搜索框，与search属性关联-->
      <v-layout wrap vertical>
        <el-row>
          <el-input
            placeholder="货号"
            class="filter-item"
            :size="small"
            clearable
            style="width: 200px"
            v-model="listQuery.hh"
          />
          <el-select
            placeholder="品类"
            :size="small"
            v-model="listQuery.plbm"
            clearable
            style="width: 200px"
            class="filter-item"
          >
            <el-option
              v-for="item in pls"
              :key="item.plbm"
              :label="item.plmc+'('+item.plbm+')'"
              :value="item.plbm"
            />
          </el-select>

          <el-select
            placeholder="仓库"
            v-model="listQuery.storagecode"
            clearable
            style="width: 200px;"
            class="filter-item"
          >
            <el-option
              v-for="item in storages"
              :key="item.key"
              :label="item.display_name+'('+item.key+')'"
              :value="item.key"
            />
          </el-select>
          <el-button type="primary" @click="handleFilter">查询</el-button>

          <el-button
            icon="el-icon-download"
            :loading="downloadLoading"
            type="primary"
            marginLeft="200dp"
            @click="handleDownload"
          >导出</el-button>

          <!-- <v-text-field label="输入关键字搜索" v-model.lazy="search" append-icon="search" hide-details /> -->
        </el-row>
      </v-layout>
    </v-card-title>
    <v-divider />

    <el-table
      :key="tableKey"
      v-loading="listLoading"
      :data="Orders"
      border
      fit
      highlight-current-row
    >
      <el-table-column label="仓库" width="150px">
        <template slot-scope="{row}">
          <span>{{ row.storageName }}</span>
        </template>
      </el-table-column>

      <el-table-column label="货号" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.hh }}</span>
        </template>
      </el-table-column>

      <el-table-column label="品名" min-width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.pinm }}</span>
        </template>
      </el-table-column>

      <el-table-column label="型号" min-width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.xingh }}</span>
        </template>
      </el-table-column>
      <el-table-column label="品类" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.plmc }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总数量" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.lx0 + scope.row.lx1 + scope.row.lx2 + scope.row.lx3 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="正常" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.lx0 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="样品" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.lx1 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="赠品" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.lx2 }}</span>
        </template>
      </el-table-column>
      <el-table-column label="残次" width="110px" align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.lx3 }}</span>
        </template>
      </el-table-column>
    </el-table>

    <pagination
      v-show="total>0"
      :total="total"
      :page.sync="listQuery.page"
      :limit.sync="listQuery.rows"
      @pagination="getList"
    />
  </v-card>
</template>

<script>
// 导入自定义的表单组件

import waves from "@/directive/waves"; // waves directive
import { parseTime } from "@/utils";
import Pagination from "@/components/Pagination"; // secondary package based on el-pagination

// arr to obj, such as { CN : "China", US : "USA" }

export default {
  name: "Order",
  data() {
    return {
      title: "预览",
      Orders: [], // 当前页路线数据pagexs
      printItems:[],
      listLoading: false,
      tableKey: 0,
      list: null,
      total: 0,
      storages: [
        { key: "0025", display_name: "锦州百货大楼" },
        { key: "0195", display_name: "锦州千盛" }
      ],
      stores: [
        { key: "0025", display_name: "锦州百货大楼" },
        { key: "0195", display_name: "锦州千盛" }
      ],
      depts: [
        { key: "0001", display_name: "锦州地区" },
        { key: "0002", display_name: "阜新地区" }
      ],
      pls: [],
      listQuery: {
        page: 1,
        rows: 10,
        hh: "",
        plbm: "",
        storagecode: ""
      },
      temp: {
        id: undefined,
        importance: 1,
        remark: "",
        timestamp: new Date(),
        title: "",
        type: "",
        status: "published"
      },
      dialogFormVisible: false,
      downloadLoading: false
    };
  },

  watch: {},

  directives: { waves },
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: "success",
        draft: "info",
        deleted: "danger"
      };
      return statusMap[status];
    },
    typeFilter(type) {
      return calendarTypeKeyValue[type];
    }
  },
  created() {
    this.getpl();
    this.getList();
  },
  methods: {
    handleDownload() {
      this.downloadLoading = true;

      let downloadParam = {};
      downloadParam.hh = this.listQuery.hh;
      downloadParam.plbm = this.listQuery.plbm;
      downloadParam.storageCode = this.listQuery.storageCode;

      this.$http
        .get("/item/report/rtkucnlist", {
          params: {
            ...downloadParam,
            uid: window.localStorage.getItem("id")
          }
        })
        .then(resp => {
          // 这里使用箭头函数
          this.printItems = resp.data.items;

          import("@/vendor/Export2Excel").then(excel => {
            const tHeader = [
              "仓库",
              "货号",
              "品名",
              "型号",
              "品类",
              "正常数量",
              "样品数量",
              "赠品数量",
              "残次数量"
            ];
            const filterVal = [
              "storageName",
              "hh",
              "pinm",
              "xingh",
              "plmc",
              "lx0",
              "lx1",
              "lx2",
              "lx3"
            ];

            const data = this.formatJson(filterVal, this.printItems);
            excel.export_json_to_excel({
              header: tHeader,
              data,
              filename: "即时库存"
            });
            this.downloadLoading = false;
          });
        })
        .catch(e => (this.printItems = []));
    },
    getpl() {
      this.$http
        .get("/item/item/pl", {
          params: {}
        })
        .then(resp => {
          // 这里使用箭头函数
          this.pls = resp.data;
        });
    },
    getList() {
      this.listLoading = true;

      this.$http
        .get("/item/report/rtkucnlist", {
          params: {
            ...this.listQuery,
            uid: window.localStorage.getItem("id")
          }
        })
        .then(resp => {
          // 这里使用箭头函数
          this.Orders = resp.data.items;
          this.total = resp.data.total;
          // 完成赋值后，把加载状态赋值为false
          this.loading = false;
        })
        .catch(
          e => ((this.Orders = []), (this.total = 0), (this.loading = false))
        );

      // Just to simulate the time of the request
      setTimeout(() => {
        this.listLoading = false;
      }, 1 * 1000);
    },

    handleFilter() {
      this.listQuery.page = 1;
      this.getList();
    },

    handleUpdate(row) {},
    sortChange(data) {
      const { prop, order } = data;
      if (prop === "storegeCode") {
        this.sortByID(order);
      }
    },
    sortByID(order) {
      this.listQuery.sort = "+lsh";
      this.handleFilter();
    },

    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "timestamp") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    }
  },
  components: {
    Pagination
  }
};
</script>

<style scoped>
</style>
